<!--  -->
<template>
  <div>
    <nav-bar>
      <div slot="left"><icon icon="#icon-fanhui" /></div>
      <div slot="center">歌手</div>
    </nav-bar>
    <b-scroll class="content"
              :probe-type="3"
              :pull-up-load="true"
              @pullingUp="loadMore">
      <div>
        <div class="option">
          <ul class="area">
            <li v-for="(item,index) in areaName" @click="areaClick(index)"> {{item}} </li>
          </ul>
          <ul class="type">
            <li v-for="(item,index) in typeName" @click="typeClick(index)">{{item}}</li>
          </ul>
        </div>
        <div class="artists">
          <div v-for="(item,index) in artist" class="artist-list" @click="artistClick(item.id)">
            <div class="artist-img"><img :src="item.img" alt="" /></div>
            <div class="artist-name">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </b-scroll>
  </div>
</template>

<script>
import BScroll from "@/components/common/scroll/BScroll";
import NavBar from "@/components/common/navBar/NavBar";
import Icon from "@/components/content/icon/Icon";
import { getArtistList } from "@/network/artist.js";
export default {
  name: "Artist",
  data() {
    return {
      artist: [],
      areaName: ['全部','华语','欧美','小日本','高丽','其他'],
      typeName: ['全部','男','女','乐队'],
      parameters: {
        area:-1,
        type:-1,
        limit: 30,
        offset: 0,
      },
      page: 0,
    };
  },
  components: {
    NavBar,
    Icon,
    BScroll,
  },
  created() {
    this.getArtistList(this.parameters.limit,this.parameters.offset,this.parameters.type,this.parameters.area);
  },
  watch: {
    parameters: {
      handler: function(value) {
        this.artist = [],
        this.getArtistList(value.limit,value.offset,value.type,value.area)
      },
      deep:true
    }
  },
  methods: {
    areaClick(index) {
      switch(index) {
        case 0: 
          this.parameters.area = -1
          break;
        case 1:
          this.parameters.area = 7
          break;
        case 2:
          this.parameters.area = 96
          break;
        case 3:
          this.parameters.area = 8
          break;
        case 4:
          this.parameters.area = 16
          break;
        case 5:
          this.parameters.area = 0
          break;
      }
    },
    typeClick(index) {
      switch(index) {
        case 0: 
          this.parameters.type = -1
          break;
        case 1:
          this.parameters.type = 1
          break;
        case 2:
          this.parameters.type = 2
          break;
        case 3:
          this.parameters.type = 3
      }
    },
    loadMore() {
      console.log(this.artist);
      let offset = 0
      this.page++ 
      offset = this.page * this.parameters.limit
      this.getArtistList(this.parameters.limit,
                         offset,
                         this.parameters.type,
                         this.parameters.area)
    },
    artistClick(id) {
      this.$router.push('/artist/detail/' + id)
    },

    getArtistList(limit, offset, type, area) {
      getArtistList(limit, offset, type, area).then((res) => {
        for (let i of res.artists) {
          this.artist.push({ id: i.id, name: i.name, img: i.picUrl });
        }
      });
    },
  },
};
</script>
<style lang='scss' scoped>
.content {
  position: fixed;
  top: 44px;
  left: 0;
  right: 0;
  bottom: 0;
}
.option {
  display: flex;
  flex-direction: column;
  border-bottom: rgb(92, 92, 92) 1px solid;
  padding: 0 10px; 
  .area {
    margin: 10px 0;
    li {
      float: left;
      padding: 0 5px;
    }
  }
  .type {
    margin-bottom: 10px;
    li {
      float: left;
      padding: 0 5px;
    }
  }
}
.artist-list {
  display: flex;
  width: 100%;
  height: 50;
  margin: 10px;
  .artist-img {
    width: 50px;
    height: 50px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .artist-name {
    line-height: 50px;
    margin-left: 10px;
  }
}
</style>